import App from "./App.vue";
import router from "./router";
import { setupStore } from "@/store";
import { useI18n } from "@/plugins/i18n";
import { getPlatformConfig } from "./config";
import { MotionPlugin } from "@vueuse/motion";
// import { useEcharts } from "@/plugins/echarts";
import { createApp, type Directive } from "vue";
import { useElementPlus } from "@/plugins/elementPlus";
import { injectResponsiveStorage } from "@/utils/responsive";
import { useVxeTable } from "@/plugins/vxeTable";
import Table from "@pureadmin/table";
// import PureDescriptions from "@pureadmin/descriptions";
import PureDescriptions from "@pureadmin/descriptions";
//图表插件
// import { useEcharts } from "@/plugins/echarts";
// 引入重置样式
import "./style/reset.scss";
// 导入公共样式
import "./style/index.scss";
// 一定要在main.ts中导入tailwind.css，防止vite每次hmr都会请求src/style/index.scss整体css文件导致热更新慢的问题
import "./style/tailwind.css";
import "element-plus/dist/index.css";
// 导入字体图标
import "./assets/iconfont/iconfont.js";
import "./assets/iconfont/iconfont.css";

const app = createApp(App);

// 自定义指令
import * as directives from "@/directives";
Object.keys(directives).forEach(key => {
  app.directive(key, (directives as { [key: string]: Directive })[key]);
});

// 全局注册@iconify/vue图标库
import {
  IconifyIconOffline,
  IconifyIconOnline,
  FontIcon
} from "./components/ReIcon";
app.component("IconifyIconOffline", IconifyIconOffline);
app.component("IconifyIconOnline", IconifyIconOnline);
app.component("FontIcon", FontIcon);

//全局注册分页组件

import { pagination } from "@/components/pagination";
app.component("pagination", pagination);

// 全局注册按钮级别权限组件
import { Auth } from "@/components/ReAuth";
app.component("Auth", Auth);

// 全局注册vue-tippy
import "tippy.js/dist/tippy.css";
import "tippy.js/themes/light.css";
import VueTippy from "vue-tippy";
app.use(VueTippy);

//代码组件
import "highlight.js/styles/a11y-dark.css"; //github.css";
import hljs from "highlight.js/lib/common";
import hljsVuePlugin from "@highlightjs/vue-plugin";

//全局注册websocket
import Websocket from "./utils/wsUtil";
// 声明一个全局变量来收集onMessage列表，因为在不同的页面可能会有不同的处理
const onMessageList: Array<Function> = [];
app.provide("onMessageList", onMessageList); // 全局注入
const onMessage = (event: any) => {
  // 遍历onMessage集合并触发
  onMessageList.forEach(f => {
    f.call(null, event);
  });
};
Websocket.me().start({
  onMessage: onMessage,
  wsUrl: `ws://${import.meta.env.VITE_WEBSOCKEET_URL}`,
  timeOut: 5000
});

// 工作流
import MyPD from "@/components/bpmncom/index";
app.use(MyPD);

getPlatformConfig(app).then(async config => {
  setupStore(app);
  app.use(router);
  await router.isReady();
  injectResponsiveStorage(app, config);
  app
    .use(MotionPlugin)
    .use(useI18n)
    .use(useElementPlus)
    .use(Table)
    .use(useVxeTable)
    .use(PureDescriptions);
  // .use(useEcharts)
  app.use(hljsVuePlugin);
  app.mount("#app");
});
